<template>
  <view class="body">
    <view class="container">
      <view class="box" v-for="(item, index) in list" :key="index">
        <view class="box_inner"
          >{{ item.title }} ：{{ item.gift }}
          <!-- <button >清除</button> -->
          <span class="icon iconfont" @click="clearOne(index)">&#xe63a;</span>
        </view>
      </view>
      <view class="button_box"></view>
      <view>
        <button class="bottom" @click="deleteAll">清除全部</button>
      </view>
    </view>
  </view>
</template>
<script>
import "../../static/font/iconfont.css";
export default {
  onShow() {
    let list = uni.getStorageSync("gift");
    if (list) {
      list = JSON.parse(list);
      this.list = list;
      console.log(this.list);
    }
  },
  data() {
    return {
      list: [],
    };
  },
  methods: {
    deleteAll() {
      uni.removeStorageSync("gift");
      this.list = [];
    },
    clearOne(index) {
      this.list = this.list.filter((item, i) => i != index);
      uni.setStorageSync("gift", JSON.stringify(this.list));
    },
  },
};
</script>
<style lang="scss" scoped>
.body {
  width: 100%;
  height: 100%;
  .container {
    width: 90%;
    height: 100%;
    margin-left: 5%;
  }
}
.box {
  width: 100%;
  height: 100upx;
  border-radius: 20upx;
  box-shadow: 2px 2px 2px 2px #ccc;
  margin: 10upx 0 20upx 0;
  .box_inner {
    position: relative;
    width: 95%;
    height: 100upx;
    margin-left: 5%;
    display: flex;
    align-items: center;
    justify-content: left;
      .icon{
        position: absolute;
        right: 0;
      color: #ccc;
      font-size: 85rpx;
    }
  }
}
.bottom {
  position: fixed;
  width: 50%;
  height: 100upx;
  bottom: 10%;
  right: 0%;
  button {
    width: 100%;
    height: 100upx;
  }
}
.button_box {
  width: 100%;
  height: 100upx;
}
</style>